<template>
<div>
<!-- 切换默认和紧急、动态和评论-->
    <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="动态举报默认" name="first">
                <!--    展示列表-->
                <el-table
                        :data="tableDynList"
                        style="width: 100%"
                        border
                        :header-cell-style="{textAlign: 'center'}"
                        :cell-style="{ textAlign: 'center' }">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <!--套娃-->
                                <el-table
                                        :data="props.row.dynamicReport"
                                        style="width: 100%">
                                    <el-table-column
                                            label="举报条目id"
                                            prop="reportId">
                                    </el-table-column>
                                    <el-table-column
                                            label="举报时间"
                                            prop="createTime">
                                    </el-table-column>
                                    <el-table-column
                                            label="举报原因"
                                            prop="reportContent">
                                    </el-table-column>
                                    <el-table-column
                                            fixed="right"
                                            label="操作"
                                            width="120">
                                        <template slot-scope="scope">
                                            <el-button
                                                    @click.native.prevent="changeState(scope.row.reportId)"
                                                    type="text"
                                                    size="small">
                                                移除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <!--套娃-->
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="标题"
                            prop="dynamicTitle">
                    </el-table-column>
                    <el-table-column
                            label="创建时间"
                            prop="createTime">
                    </el-table-column>
                    <el-table-column
                            label="动态id"
                            prop="dynamicId">
                    </el-table-column>
                    <el-table-column
                            label="内容"
                    >
                        <template slot-scope="props">
                            <el-popover
                                    placement="bottom"
                                    title="文章内容"
                                    width="200"
                                    trigger="hover"
                            >
                                <span>{{ props.row.contentText }}</span>
                                <el-button slot="reference">查看全文</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>

                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="120">
                        <template slot-scope="scope"  >
                            <el-button type="danger" plain @click="DynHandle(scope.row.dynamicId)" >封禁动态</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-tab-pane>
            <el-tab-pane label="动态举报超时" name="second">

                <el-table
                        :data="tableDynLateList"
                        style="width: 100%"
                        border
                        :header-cell-style="{textAlign: 'center'}"
                        :cell-style="{ textAlign: 'center' }">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <!--套娃-->
                                <el-table
                                        :data="props.row.dynamicReport"
                                        style="width: 100%">
                                    <el-table-column
                                            label="举报条目id"
                                            prop="reportId">
                                    </el-table-column>
                                    <el-table-column
                                            label="举报时间"
                                            prop="createTime">
                                    </el-table-column>
                                    <el-table-column
                                            label="举报原因"
                                            prop="reportContent">
                                    </el-table-column>
                                    <el-table-column
                                            fixed="right"
                                            label="操作"
                                            width="120">
                                        <template slot-scope="scope">
                                            <el-button
                                                    @click.native.prevent="changeState(scope.row.reportId)"
                                                    type="text"
                                                    size="small">
                                                移除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <!--套娃-->
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="标题"
                            prop="dynamicTitle">
                    </el-table-column>
                    <el-table-column
                            label="创建时间"
                            prop="createTime">
                    </el-table-column>
                    <el-table-column
                            label="动态id"
                            prop="dynamicId"
                    >
                    </el-table-column>
                    <el-table-column
                            label="内容"
                    >
                        <template slot-scope="props">
                            <el-popover
                                    placement="bottom"
                                    title="文章内容"
                                    width="200"
                                    trigger="hover"
                            >
                                <span>{{ props.row.contentText }}</span>
                                <el-button slot="reference">查看全文</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="120">
                        <template slot-scope="scope"  >
                            <el-button type="danger" plain @click="DynHandle(scope.row.dynamicId)" >封禁动态</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-tab-pane>
<!--            <el-tab-pane label="评论举报默认" name="third">-->

<!--                <el-table-->
<!--                        :data="tableComList"-->
<!--                        style="width: 100%"-->
<!--                        border-->
<!--                        :header-cell-style="{textAlign: 'center'}"-->
<!--                        :cell-style="{ textAlign: 'center' }">-->
<!--                    <el-table-column type="expand">-->
<!--                        <template slot-scope="props">-->
<!--                            <el-form label-position="left" inline class="demo-table-expand">-->
<!--                                &lt;!&ndash;套娃&ndash;&gt;-->
<!--                                <el-table-->
<!--                                        :data="props.row.commentReport"-->
<!--                                        style="width: 100%">-->
<!--                                    <el-table-column-->
<!--                                            label="举报条目id"-->
<!--                                            prop="reportId">-->
<!--                                    </el-table-column>-->
<!--                                    <el-table-column-->
<!--                                            label="举报时间"-->
<!--                                            prop="createTime">-->
<!--                                    </el-table-column>-->
<!--                                    <el-table-column-->
<!--                                            label="举报原因"-->
<!--                                            prop="reportContent">-->
<!--                                    </el-table-column>-->
<!--                                    <el-table-column-->
<!--                                            fixed="right"-->
<!--                                            label="操作"-->
<!--                                            width="120">-->
<!--                                        <template slot-scope="scope">-->
<!--                                            <el-button-->
<!--                                                    @click.native.prevent="changeState(scope.row.reportId)"-->
<!--                                                    type="text"-->
<!--                                                    size="small">-->
<!--                                                移除-->
<!--                                            </el-button>-->
<!--                                        </template>-->
<!--                                    </el-table-column>-->
<!--                                </el-table>-->
<!--                                &lt;!&ndash;套娃&ndash;&gt;-->
<!--                            </el-form>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            label="创建时间"-->
<!--                            prop="createTime">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            label="评论id"-->
<!--                            prop="commentId"-->
<!--                    >-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            label="内容"-->
<!--                    >-->
<!--                        <template slot-scope="props">-->
<!--                            <el-popover-->
<!--                                    placement="bottom"-->
<!--                                    title="文章内容"-->
<!--                                    width="200"-->
<!--                                    trigger="hover"-->
<!--                            >-->
<!--                                <span>{{ props.row.commentContent }}</span>-->
<!--                                <el-button slot="reference">查看全文</el-button>-->
<!--                            </el-popover>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            fixed="right"-->
<!--                            label="操作"-->
<!--                            width="120">-->
<!--                        <template slot-scope="scope"  >-->
<!--                            <el-button type="danger" plain @click="ComHandle(scope.row.commentId)" >封禁评论</el-button>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
<!--                </el-table>-->

<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="评论举报超时" name="fourth">-->
<!--                <el-table-->
<!--                        :data="tableComLateList"-->
<!--                        style="width: 100%"-->
<!--                        border-->
<!--                        :header-cell-style="{textAlign: 'center'}"-->
<!--                        :cell-style="{ textAlign: 'center' }">-->
<!--                    <el-table-column type="expand">-->
<!--                        <template slot-scope="props">-->
<!--                            <el-form label-position="left" inline class="demo-table-expand">-->
<!--                                &lt;!&ndash;套娃&ndash;&gt;-->
<!--                                <el-table-->
<!--                                        :data="props.row.commentReport"-->
<!--                                        style="width: 100%">-->
<!--                                    <el-table-column-->
<!--                                            label="举报条目id"-->
<!--                                            prop="reportId">-->
<!--                                    </el-table-column>-->
<!--                                    <el-table-column-->
<!--                                            label="举报时间"-->
<!--                                            prop="createTime">-->
<!--                                    </el-table-column>-->
<!--                                    <el-table-column-->
<!--                                            label="举报原因"-->
<!--                                            prop="reportContent">-->
<!--                                    </el-table-column>-->
<!--                                    <el-table-column-->
<!--                                            fixed="right"-->
<!--                                            label="操作"-->
<!--                                            width="120">-->
<!--                                        <template slot-scope="scope">-->
<!--                                            <el-button-->
<!--                                                    @click.native.prevent="changeState(scope.row.reportId)"-->
<!--                                                    type="text"-->
<!--                                                    size="small">-->
<!--                                                移除-->
<!--                                            </el-button>-->
<!--                                        </template>-->
<!--                                    </el-table-column>-->
<!--                                </el-table>-->
<!--                                &lt;!&ndash;套娃&ndash;&gt;-->
<!--                            </el-form>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            label="创建时间"-->
<!--                            prop="createTime">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            label="评论id"-->
<!--                            prop="commentId"-->
<!--                    >-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            label="内容"-->
<!--                    >-->
<!--                        <template slot-scope="props">-->
<!--                            <el-popover-->
<!--                                    placement="bottom"-->
<!--                                    title="文章内容"-->
<!--                                    width="200"-->
<!--                                    trigger="hover"-->
<!--                            >-->
<!--                                <span>{{ props.row.commentContent }}</span>-->
<!--                                <el-button slot="reference">查看全文</el-button>-->
<!--                            </el-popover>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
<!--                    <el-table-column-->
<!--                            fixed="right"-->
<!--                            label="操作"-->
<!--                            width="120">-->
<!--                        <template slot-scope="scope"  >-->
<!--                            <el-button type="danger" plain  @click="ComHandle(scope.row.commentId)" ">封禁评论</el-button>-->
<!--                        </template>-->
<!--                    </el-table-column>-->

<!--                </el-table>-->
<!--            </el-tab-pane>-->
        </el-tabs>
    </div>
</div>

</template>

<script>
    export default {
        name: "Report",
        data() {
            return {
                tableDynList: [],
                tableDynLateList:[],
                tableComList: [],
                tableComLateList:[],
                activeName:'',
            }
        },
        methods: {
            DynListGet(){
                let url = this.$baseUrl+"/report/dyn"
                this.axios.get(url).then((res) => {
                    console.log(res.data.data);
                    this.tableDynList = res.data.data;
                })
            },DynLateListGet() {
                let url = this.$baseUrl + "/report/dynLate"
                this.axios.get(url).then((res) => {
                    console.log(res.data.data);
                    this.tableDynLateList = res.data.data;
                })
            },ComListGet() {
                let url = this.$baseUrl + "/report/com"
                this.axios.get(url).then((res) => {
                    console.log(res.data.data);
                    this.tableComList = res.data.data;
                })
            },ComListLateGet() {
                let url = this.$baseUrl + "/report/comLate"
                this.axios.get(url).then((res) => {
                    console.log(res.data.data);
                    this.tableComLateList = res.data.data;
                })
            },changeState(index){
                let url = this.$baseUrl + "/report/stateHandle"
                this.axios.post(url,{
                    reportId:index,
                }).then((res) => {
                    if (res.data.data=200){
                        console.log("举报信息处理完毕")
                    }
                    this.DynListGet();
                    this.ComListGet();
                    this.DynLateListGet();
                    this.ComListLateGet();
                })
            },
            DynHandle(index){
                let url = this.$baseUrl + "/report/dynHandle"
                this.axios.post(url, {
                        dynamicId:index,
                    }).then((res) => {
                    if (res.data.data=200){
                        console.log("动态已封禁")
                    }
                    this.DynListGet();
                    this.DynLateListGet();
                })
            },ComHandle(index){
                console.log(index);
                let url = this.$baseUrl + "/report/comHandle"

                this.axios.post(url, {
                        commentId:index,
                    }).then((res) => {
                    console.log(res.data.data);
                    if (res.data.data=200){
                        console.log("评论已封禁")
                    }
                    this.ComListGet();
                    this.ComListLateGet();
                })
            }, handleClick(tab, event) {
                console.log(tab, event);
            },
        },created() {
            this.DynListGet();
            this.ComListGet();
            this.DynLateListGet();
            this.ComListLateGet();
        },
    }
</script>

<style scoped>

</style>